<template>
	<view>
		<image class="bind_bg" src="/static/img/bindAli.png" mode=""></image>
		<view class="input_box">
			<view class="input_row flexRow">
				<view class="input_icon flexRow">
					<image class="alipay_icon" src="/static/img/alipay.png" mode=""></image>
				</view>
				
				<input v-model="aliAccount" class="input_warrper" type="text" value="" placeholder="请输入支付宝账号" />
			</view>
			<view class="input_row flexRow">
				<view class="input_icon flexRow">
					<image class="aliuser_icon" src="/static/img/ali_user.png" mode=""></image>
				</view>
				
				<input v-model="aliName" class="input_warrper" type="text" value="" placeholder="请输入实名认证的姓名" />
			</view>
		</view>
		<view class="check_btn" :class="{disabled: hasBind}" @tap="setAlipay">
			更新绑定
		</view>
	</view>
</template>

<script>
	import request from "../../apiRequest/request.js"
	export default {
		data() {
			return {
				user: {},
				aliAccount: '',
				aliName: '',
				hasBind: false
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user');
			if(this.user.zfb_user){
				this.hasBind = true
			}
			this.aliAccount = this.user.zfb_user;
			this.aliName = this.user.zfb_name;
		},
		methods: {
			setAlipay(){
				let that = this;
				if(this.hasBind){
					return
				}
				if(this.aliAccount && this.aliName){
					uni.showModal({
					    title: '提示',
					    content: '支付宝账号是否正确关系到提现能否成功，请务必保证填写正确!',
					    success(res) {
					        if (res.confirm) {
					            request.bindalipay(that.aliAccount,that.aliName).then(res=>{
					            	console.log(res)
									that.hasBind = true
									uni.showToast({
									    title: '绑定成功',
										icon: 'none',
									    duration: 2000
									})
									// request.userInfo().then(res=>{
									// 	uni.setStorageSync('user', res.data.userInfo)
									// }).catch(err=>{
									// 	that.$unexpected(err)
									// })
					            }).catch(err=>{
									that.$unexpected(err)
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
				
			}
		}
	}
</script>

<style>
.bind_bg{
	display: block;
	width: 188rpx;
	height: 176rpx;
	margin: 0 auto;
	margin-top: 70rpx;
}
.input_box{
	margin-top: 88rpx;
}
.input_row{
	box-sizing: border-box;
	padding: 0 136rpx;
	align-items: center;
	margin-bottom: 50rpx;
}
.input_warrper{
	flex: 1;
	border-bottom: 2rpx solid rgba(238,238,238,1);
	padding: 16rpx 0;
}
.input_icon{
	width: 80rpx;
	justify-content: center;
	align-items: flex-end;
}
.alipay_icon{
	width: 52rpx;
	height: 52rpx;
}
.aliuser_icon{
	width: 40rpx;
	height: 44rpx;
}
.input_warrper{
	font-size:32rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
}
.check_btn{
	width:600rpx;
	height:100rpx;
	line-height: 100rpx;
	background:rgba(4,137,255,1);
	border-radius:10rpx;
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin: 0 auto;
	text-align: center;
	margin-top: 100rpx;
}
.disabled{
	background-color: rgba(186,186,186,0.7);
}
</style>
